<template>
  <div>
    <div class="layout">
      <div class="register-container">
        <Subtitle text="随行嘉宾基础信息"/>
        <div class="form">
          <IntelSelect
              :label="$t('userForm.salutation')"
              v-model="form.salution"
              class="register-input"
              :options="salutationOptions"
              @change="(val)=> {form.salution = val}"
          />
          <IntelInput
              :label="$t('userForm.lastName')"
              v-model="form.lastName"
              :placeholder="$t('userForm.lastName')"
              class="register-input"
          />
          <IntelInput
              :label="$t('userForm.firstName')"
              v-model="form.firstName"
              :placeholder="$t('userForm.firstName')"
              class="register-input"
          />
          <div class="input-group">
            <IntelInput
                :label="$t('userForm.preferredBadgeLastName')"
                v-model="form.preferredBadgeLastName"
                :placeholder="$t('userForm.preferredBadgeLastName')"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                :label="$t('userForm.preferredBadgeFirstName')"
                v-model="form.preferredBadgeFirstName"
                :placeholder="$t('userForm.preferredBadgeFirstName')"
                class="register-input"
            />
          </div>
          <IntelInput
              label="身份证号*"
              v-model="form.birthdate"
              placeholder="身份证号*"
              class="register-input"
          />
          <IntelInput
              label="邮箱*"
              v-model="form.emailAddress"
              placeholder="邮箱*"
              class="register-input"
          />
          <div style="display: flex;">
          <IntelSelect2
              label="外套尺寸*"
              v-model="form.coatSize"
              :options="sizeOptions"
              @change="(val)=> {form.coatSize = val}"
              class="register-input"
          />
            <CoastSizeLink />
          </div>
          <div class="input-group">
            <IntelSelect
                label="是否已经接种过新冠疫苗*"
                v-model="form.vaccinationDetails"
                :options="yimiaoOptions"
                @change="(val)=> {form.vaccinationDetails = val}"
                class="register-input"
            />
            <div class="divider-space"></div>
            <IntelInput
                label="出发城市"
                v-model="form.departureCity"
                placeholder="出发城市"
                class="register-input"
            />
          </div>
          <div style="color: red;padding-top: 15px; font-size: 14px;">
            * 观赛相关的防疫细则仍待北京冬奥组委最终审批发布；<br>
            * 由于北京2022年冬奥会实施观赛实名制，后续将有工作人员联系收集您的身份证信息及护照照片提交给奥组委申请观赛门票，最终能否成功以奥组委审核结果为准。
          </div>
          <div class="divider"></div>

          <div class="input-group">
            <div class="ghost-button" @click="handlePrevious">上一步</div>
                        <div class="divider-space"></div>
                        <div class="primary-button" @click="handleNext">下一步</div>
          </div>
        </div>
      </div>
    </div>
    <Alert v-if="alertShow" @ok="() => alertShow = false" :content="alertContent"/>
  </div>
</template>

<script>
import IntelInput from "../components/common/IntelInput";
import IntelSelect from "../components/common/IntelSelect";
import IntelSelect2 from "../components/common/IntelSelect2";
import Subtitle from "../components/common/Subtitle";
import {getGuest, getGuestAuto, getUserInfoAuto, updateGuest, updateUserInfo} from "../api/service";
import Alert from "@/components/common/Alert";
import CoastSizeLink from "../components/CoastSizeLink";

export default {
  name: "faq",
  components: {
    IntelInput,
    IntelSelect,
    IntelSelect2,
    Subtitle,
    Alert,
    CoastSizeLink
  },
  data: function () {
    return {
      form: {
        id: null,
        salution: null,
        lastName: null,
        firstName: null,
        preferredBadgeFirstName: null,
        preferredBadgeLastName: null,
        birthdate: '',
        coatSize: '外套尺寸*',
        emailAddress: null
      },
      salutationOptions: this.$t('dictionary.salutation'),
      sizeOptions: ['S', 'M', 'L', 'XL', '2XL', '3XL'],
      alertShow: false,
      alertContent: '',
      yimiaoOptions: ['是', '否']
    }
  },
  watch: {
    '$route': {
      handler: function (to, from) {
        this.getGuest()
      },
      immediate:true
    }
  },
  mounted() {
    this.getGuest()
  },
  methods: {
    getGuest () {
      getGuest().then(res => {
        if (res.code === 200) {
          localStorage.setItem('accompany', JSON.stringify(res.data))
          const user = res.data
          this.form = {
            id: user.id || '',
            salution:  user.salution || '称谓*',
            lastName:  user.lastName || '',
            firstName:  user.firstName || '',
            preferredBadgeFirstName:  user.preferredBadgeFirstName || '',
            preferredBadgeLastName:  user.preferredBadgeLastName || '',
            birthdate:  user.birthdate || '',
            coatSize:  user.coatSize || '外套尺寸*',
            emailAddress:  user.emailAddress || '',
            vaccinationDetails: user.vaccinationDetails || '是否已经接种过新冠疫苗*',
            departureCity: user.departureCity || ''
          }
        }
      })
    },
    next() {
      this.$router.push({
        path: 'addAccompanyInviteeInfo'
      })
    },
    handleNext () {
      this.handleSubmit()
    },
    handlePrevious () {
      this.$router.push({
        path: '/inviteeInfo'
      })
    },
    handleSubmit() {
      const that = this
      const param = this.form
      param.scheduleUserId = JSON.parse(localStorage.overnight_userInfo).id
      if (param.emailAddress.length) {
        updateGuest(param).then(res => {
          console.log(res)
          if (res.code === 200) {
            that.next()
          } else {
            const msg = res.message.split('$$')[0]
            this.alertShow = true
            this.alertContent = msg
          }
        })
      } else {
        this.alertShow = true
        this.alertContent = '邮箱不可为空'
      }
    }
  }
}
</script>

<style scoped>
.register-container {
  width: 800px;
  padding-top: 60px;
  padding-left: 120px;
  padding-bottom: 120px;
}

.create-text {
  padding-top: 0px;
}

.create-text .title {
  font-weight: bold;
  font-size: 20px;
  color: #0068B5;
  padding-bottom: 18px;
}

.create-text .desc {
  font-size: 14px;
  color: #999999;
}

.create-text .desc a {
  color: #0068B5;
  text-decoration: none;
}

.form {
  /*padding-top: 24px;*/
}

.register-input {
  margin-top: 16px;
  width: 100%;
}

.input-group {
  width: 100%;
  display: flex;
}

.divider-space {
  width: 32px;
  height: 60px;
  display: inline-block;
}
.divider {
  width: 100%;
  height: 40px;
  display: block;
}
.password-prompt {
  font-size: 14px;
  color: #999999;
}

.primary-button {
  width: 146px;
  height: 36px;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  background: #0068B5;
  cursor: pointer;
  margin-top: 16px;
}
.ghost-button {
  width: 146px;
  height: 36px;
  color: #0068B5;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  border: 1px solid #0068B5;
  cursor: pointer;
  margin-top: 16px;
}

.password-prompt {
  padding-top: 10px;
}

.text-green {
  color: green;
  text-decoration: underline;
}
</style>
